<template>
  <div class="card">
    <SlideCard />
    <div class="card-container">
      <n-grid
        cols="1 s:1 m:1 l:1 xl:2 2xl:2"
        item-responsive
        responsive="screen"
        :x-gap="16"
        :y-gap="16"
        style="margin-bottom: 24px"
      >
        <n-gi>
          <CardCollectAmount />
        </n-gi>
        <n-gi>
          <CardCollectChart />
        </n-gi>
      </n-grid>
      <CardUseRecord />
    </div>
  </div>
</template>

<script lang="ts" setup>
  import SlideCard from './SlideCard.vue'
  import CardUseRecord from './CardUseRecord.vue'
  import CardCollectAmount from './CardCollectAmount.vue'
  import CardCollectChart from './CardCollectChart.vue'
</script>

<style scoped lang="scss">
  .card {
    height: calc(100vh - 60px);
    width: 100%;
    padding: $space-default;
    box-sizing: border-box;
    display: flex;
    &-container {
      flex: 1;
    }
    &-collect {
      display: flex;
      gap: $space-default;
    }
  }
</style>
